<template>
  <el-dialog title="查看抽样调查点" v-model="open" width="900px" append-to-body @open="initOpen" @close="cancel">
    <p class="dialogTitle">{{form.taskName}}</p>
    <el-form ref="surveyRef" :model="form" label-width="180px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model="form.taskName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">  
          <el-form-item label="任务编号" prop="taskCode">
            <el-input v-model="form.taskCode" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实地调查点名称" prop="fieldSurveyName">
            <el-input v-model="form.fieldSurveyName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="form.longitude" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="纬度" prop="latitude">
            <el-input v-model="form.latitude" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑地点-省" prop="province">
            <el-select v-model="form.province" :disabled="canEdit" style="width: 100%;"></el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="建筑地点-市" prop="city">
            <el-select v-model="form.city" :disabled="canEdit" style="width: 100%;"></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑地点-区/县" prop="county">
            <el-select v-model="form.area" :disabled="canEdit" style="width: 100%;"></el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属乡镇" prop="township">
            <el-input v-model="form.township" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总户数" prop="totalHouseholdNum">
            <el-input v-model="form.totalHouseholdNum" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="总人口" prop="totalPopulation">
            <el-input v-model="form.totalPopulation" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际常驻人口" prop="actualResidentPopulation">
            <el-input v-model="form.actualResidentPopulation" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="外出务工人口" prop="migrantWorkers">
            <el-input v-model="form.migrantWorkers" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人口比例%（少年儿童）" prop="childrenProportion">
            <el-input v-model="form.childrenProportion" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人口比例%（中青年）" prop="youngProportion">
            <el-input v-model="form.youngProportion" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人口比例%（老年）" prop="oldAgeProportion">
            <el-input v-model="form.oldAgeProportion" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="交通通达情况" prop="trafficConditions">
            <el-select v-model="form.trafficConditions" :disabled="canEdit" style="width: 100%;">
              <el-option v-for="item in [
                { value: '路况优良', label: '路况优良' },
                { value: '路况一般', label: '路况一般' },
                { value: '路况较差', label: '路况较差' },
                { value: '路况艰难', label: '路况艰难' }
              ]" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周边地理环境" prop="environment">
            <el-select v-model="form.environment" :disabled="canEdit" style="width: 100%;">
              <el-option v-for="item in [
                { value: '平原', label: '平原' },
                { value: '盆地', label: '盆地' },
                { value: '山区', label: '山区' },
                { value: '高原', label: '高原' },
                { value: '河谷', label: '河谷' },
              ]" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋数量" prop="houseNum">
            <el-input v-model="form.houseNum" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋平均间数" prop="roomAverageNum">
            <el-input v-model="form.roomAverageNum" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主要建筑材料" prop="mainBuildingMaterials">
            <el-input v-model="form.mainBuildingMaterials" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(高层建筑)" prop="highStructure">
            <el-input v-model="form.highStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(钢结构房屋)" prop="steelStructure">
            <el-input v-model="form.steelStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(多层钢筋混凝土房屋)" prop="concreteStructure">
            <el-input v-model="form.concreteStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(砖混结构房屋)" prop="masonryStructure">
            <el-input v-model="form.masonryStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(砖木结构房屋)" prop="brickWoodStructure">
            <el-input v-model="form.brickWoodStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(土结构房屋)" prop="soilStructure">
            <el-input v-model="form.soilStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(木结构房屋)" prop="woodStructure">
            <el-input v-model="form.woodStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(石结构房屋)" prop="stoneStructure">
            <el-input v-model="form.stoneStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋类型比例%(其他结构房屋)" prop="otherStructure">
            <el-input v-model="form.otherStructure" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋建造年代比例%(1970年以前)" prop="build70sBefore">
            <el-input v-model="form.build70sBefore" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋建造年代比例%(1971年-1980年)" prop="build70s">
            <el-input v-model="form.build70s" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋建造年代比例%(1981年-1990年)" prop="build80s">
            <el-input v-model="form.build80s" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋建造年代比例%(1991年-2000年)" prop="build90s">
            <el-input v-model="form.build90s" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋建造年代比例%(2001年-2010年)" prop="build00s">
            <el-input v-model="form.build00s" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋建造年代比例%(2011年-2015年)" prop="build10s">
            <el-input v-model="form.build10s" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋建造年代比例%(2016年-2020年)" prop="build16s">
            <el-input v-model="form.build16s" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房屋建造年代比例%(2021年及以后)" prop="build20s">
            <el-input v-model="form.build20s" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周边是否有学校" prop="isSchool">
            <el-select v-model="form.isSchool" :disabled="canEdit" style="width: 100%;">
              <el-option v-for="item in [{ value: '是', label: '是' }, { value: '否', label: '否' }]" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学生数" prop="studentNum">
            <el-input v-model="form.studentNum" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="教室数" prop="classroomNum">
            <el-input v-model="form.classroomNum" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="周边是否有医院" prop="isHospital">
            <el-select v-model="form.isHospital" :disabled="canEdit" style="width: 100%;">
              <el-option v-for="item in [{ value: '是', label: '是' }, { value: '否', label: '否' }]" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医生数" prop="doctorNum">
            <el-input v-model="form.doctorNum" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="床位数" prop="bedNum">
            <el-input v-model="form.bedNum" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周边是否有地质灾害" prop="isDisaster">
            <el-select v-model="form.isDisaster" :disabled="canEdit" style="width: 100%;">
              <el-option v-for="item in [{ value: '是', label: '是' }, { value: '否', label: '否' }]" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="类型" prop="disasterScale">
            <el-input v-model="form.disasterType" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规模" prop="disasterScale">
            <el-input v-model="form.disasterScale" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="周边是否有水库" prop="isReservoir">
            <el-select v-model="form.isReservoir" :disabled="canEdit" style="width: 100%;">
              <el-option v-for="item in [{ value: '是', label: '是' }, { value: '否', label: '否' }]" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="坝型" prop="damType">
            <el-input v-model="form.damType" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="库容" prop="reservoirCapacity">
            <el-input v-model="form.reservoirCapacity" :disabled="canEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注说明" prop="remarks">
            <el-input v-model="form.remarks" maxlength="100" show-word-limit :autosize="{ minRows: 3, maxRows: 5}" :disabled="canEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="提交人" prop="submitter">
            <el-input v-model="form.submitter" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提交时间" prop="submitTime">
            <el-date-picker clearable v-model="form.submitTime" type="date" value-format="YYYY-MM-DD" :disabled="true">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { getSurvey } from "@/api/basedatamanage/survey";
const props = defineProps({
  open: Boolean,
  id: String
})
const emits = defineEmits(['update:open'])
const data = reactive({
  form: {},
  canEdit: true
})
let { form, canEdit } = toRefs(data)

const initOpen = () => {
  getSurvey(props.id).then(res => {
    if(res.code == 200){
      form.value = res.data.data;
    }
  });
}

const cancel = () => {
  emits('update:open', false)
}
</script>